<template>
  <div class="search-content">
    <div class="search-history">
      <h2>搜索历史</h2>
      <div @click="deleteSearch">删除</div>
    </div>
    <ul>
      <li v-for="(item, index) in searchArr" :key="index" @click="goSearch(item)">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
export default {
  name: 'Content',
  data () {
    return {
      searchArr: []
    }
  },
  created () {
    this.searchArr = JSON.parse(localStorage.getItem('searchList'))
  },
  methods: {
    deleteSearch () {
      MessageBox({
        title: '提示',
        message: '是否要删除全部搜索历史',
        showCancelButton: true
      }).then(() => {
        localStorage.removeItem('searchList')
        this.searchArr = []
      })
    },
    goSearch (item) {
      this.$router.push({
        path: '/search-list',
        query: {
          key: item
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.search-content {
  .search-history {
    display: flex;
    justify-content: space-between;
    margin: 0.533333rem 0;
    padding: 0 0.533333rem;
    font-size: 0.426667rem;
    color: #333;
    h2 {
      font-size: 0.426667rem;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.533333rem;
    li {
      margin: 0.16rem;
      padding: 0.16rem 0.213333rem;
      background-color: #eee;
      color: #333;
      border-radius: 0.32rem;
      font-size: 0.32rem;
    }
  }
}
</style>
